<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>无刷电机控制器 - 科技感界面</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <div class="main-container">
        <!-- Left Panel: Controls and Configuration -->
        <div class="left-panel">
            <!-- Header -->
            <div class="header">
                <h1>🚀 无刷电机控制器</h1>
            </div>

            <!-- System Status -->
            <div class="section">
                <h2><i class="fas fa-chart-line"></i> 系统状态</h2>
                <div class="status-grid">
                    <div class="status-item">
                        <span class="status-label">连接状态:</span>
                        <span id="connection-status" class="status-indicator disconnected">未连接</span>
                    </div>
                    <div class="status-item">
                        <span class="status-label">监控状态:</span>
                        <span id="monitoring-status" class="status-indicator stopped">停止</span>
                    </div>
                    <div class="status-item">
                        <span class="status-label">日志状态:</span>
                        <span id="logging-status" class="status-indicator stopped">停止</span>
                    </div>
                    <div class="status-item">
                        <span class="status-label">电机状态:</span>
                        <span id="motor-status" class="status-indicator disconnected">未就绪</span>
                    </div>
                    <div class="status-item">
                        <span class="status-label">UART状态:</span>
                        <span id="uart-status" class="status-indicator disconnected">未连接</span>
                    </div>
                    <div class="status-item">
                        <span class="status-label">UART监控:</span>
                        <span id="uart-monitor-status" class="status-indicator stopped">停止</span>
                    </div>
                </div>
                
                <!-- 电机配置监控信息 -->
                <div class="motor-config-section">
                    <h3><i class="fas fa-cog"></i> 电机配置</h3>
                    <div class="motor-config-grid">
                        <div class="motor-config-item">
                            <span class="motor-config-label">左电机最大转速:</span>
                            <span id="left-motor-max-speed" class="motor-config-value">1500 RPM</span>
                        </div>
                        <div class="motor-config-item">
                            <span class="motor-config-label">右电机最大转速:</span>
                            <span id="right-motor-max-speed" class="motor-config-value">1500 RPM</span>
                        </div>
                        <div class="motor-config-item">
                            <span class="motor-config-label">左电机最小转速:</span>
                            <span id="left-motor-min-speed" class="motor-config-value">0 RPM</span>
                        </div>
                        <div class="motor-config-item">
                            <span class="motor-config-label">右电机最小转速:</span>
                            <span id="right-motor-min-speed" class="motor-config-value">0 RPM</span>
                        </div>
                        <div class="motor-config-item">
                            <span class="motor-config-label">默认转速:</span>
                            <span id="default-speed" class="motor-config-value">600 RPM</span>
                        </div>
                        <div class="motor-config-item">
                            <span class="motor-config-label">加速度:</span>
                            <span id="acceleration" class="motor-config-value">100</span>
                        </div>
                        <div class="motor-config-item">
                            <span class="motor-config-label">减速度:</span>
                            <span id="deceleration" class="motor-config-value">100</span>
                        </div>
                        <div class="motor-config-item">
                            <span class="motor-config-label">系统模式:</span>
                            <span id="system-mode" class="motor-config-value">独立速度闭环</span>
                        </div>
                    </div>
                </div>
                
                <!-- 电机实时信息 -->
                <div class="motor-realtime-section">
                    <h3><i class="fas fa-chart-line"></i> 实时信息</h3>
                    <div class="motor-realtime-grid">
                        <div class="motor-realtime-item">
                            <span class="motor-realtime-label">左电机转速:</span>
                            <span id="left-motor-speed" class="motor-realtime-value">0 RPM</span>
                        </div>
                        <div class="motor-realtime-item">
                            <span class="motor-realtime-label">右电机转速:</span>
                            <span id="right-motor-speed" class="motor-realtime-value">0 RPM</span>
                        </div>
                        <div class="motor-realtime-item">
                            <span class="motor-realtime-label">左电机状态:</span>
                            <span id="left-motor-state" class="motor-realtime-indicator">未知</span>
                        </div>
                        <div class="motor-realtime-item">
                            <span class="motor-realtime-label">右电机状态:</span>
                            <span id="right-motor-state" class="motor-realtime-indicator">未知</span>
                        </div>
                        <div class="motor-realtime-item">
                            <span class="motor-realtime-label">运行方向:</span>
                            <span id="motor-direction" class="motor-realtime-value">停止</span>
                        </div>
                        <div class="motor-realtime-item">
                            <span class="motor-realtime-label">运行时间:</span>
                            <span id="running-time" class="motor-realtime-value">00:00:00</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Configuration Management -->
            <div class="section">
                <h2><i class="fas fa-cog"></i> 配置管理</h2>
                <div class="control-grid">
                    <button class="btn btn-info" onclick="showSerialConfigDialog()">
                        <i class="fas fa-plug"></i> Modbus串口配置
                    </button>
                    <button class="btn btn-info" onclick="showUartConfigDialog()">
                        <i class="fas fa-terminal"></i> UART串口配置
                    </button>
                    <button class="btn btn-info" onclick="showMotorConfigDialog()">
                        <i class="fas fa-motorcycle"></i> 电机配置
                    </button>
                    <button class="btn btn-info" onclick="showLoggingConfigDialog()">
                        <i class="fas fa-file-alt"></i> 日志配置
                    </button>
                    <button class="btn btn-warning" onclick="showConfigLoadDialog()">
                        <i class="fas fa-file-import"></i> 配置文件
                    </button>
                </div>
            </div>

            <!-- Connection Control -->
            <div class="section">
                <h2><i class="fas fa-link"></i> 连接控制</h2>
                <div class="info-box">
                    <i class="fas fa-info-circle"></i>
                    <span>操作流程：1.保存串口配置 → 2.测试连接 → 3.连接电机 → 4.开始控制</span>
                </div>
                <div class="control-grid">
                    <button class="btn btn-success" onclick="connectMotor()" title="检测电机设备并建立电机控制连接">
                        <i class="fas fa-motorcycle"></i> <span id="connect-text">连接电机</span>
                        <span id="connect-loading" class="loading hidden"></span>
                    </button>
                    <button class="btn btn-danger" onclick="disconnectMotor()">
                        <i class="fas fa-unlink"></i> 断开连接
                    </button>
                    <button class="btn btn-primary" onclick="refreshStatus()">
                        <i class="fas fa-sync-alt"></i> 刷新状态
                    </button>
                </div>
            </div>

            <!-- Speed Control -->
            <div class="section">
                <h2><i class="fas fa-tachometer-alt"></i> 速度控制</h2>
                <div class="form-row">
                    <div class="form-group">
                        <label for="left-speed-input">左电机转速 (RPM):</label>
                        <input type="number" id="left-speed-input" min="0" max="1000" value="500">
                    </div>
                    <div class="form-group">
                        <label for="right-speed-input">右电机转速 (RPM):</label>
                        <input type="number" id="right-speed-input" min="0" max="1000" value="500">
                    </div>
                </div>
                <div class="control-grid">
                    <button class="btn btn-primary" onclick="setSpeed()">
                        <i class="fas fa-play"></i> 设置转速
                    </button>
                    <button class="btn btn-warning" onclick="resetSpeed()">
                        <i class="fas fa-undo"></i> 重置转速
                    </button>
                </div>
            </div>

            <!-- Direction Control -->
            <div class="section">
                <h2><i class="fas fa-gamepad"></i> 方向控制</h2>
                <div class="control-grid">
                    <button class="btn btn-success" onclick="executeMotorCommand('forward')">
                        <i class="fas fa-arrow-up"></i> 前进
                    </button>
                    <button class="btn btn-success" onclick="executeMotorCommand('backward')">
                        <i class="fas fa-arrow-down"></i> 后退
                    </button>
                    <button class="btn btn-warning" onclick="executeMotorCommand('left')">
                        <i class="fas fa-arrow-left"></i> 左转
                    </button>
                    <button class="btn btn-warning" onclick="executeMotorCommand('right')">
                        <i class="fas fa-arrow-right"></i> 右转
                    </button>
                    <button class="btn btn-danger" onclick="executeMotorCommand('stop')">
                        <i class="fas fa-stop"></i> 停止
                    </button>
                </div>
            </div>

            <!-- Monitoring Control -->
            <div class="section">
                <h2><i class="fas fa-chart-area"></i> 监控控制</h2>
                <div class="control-grid">
                    <button class="btn btn-success" onclick="startMonitoring()">
                        <i class="fas fa-play-circle"></i> 启动监控
                    </button>
                    <button class="btn btn-danger" onclick="stopMonitoring()">
                        <i class="fas fa-stop-circle"></i> 停止监控
                    </button>
                    <button class="btn btn-info" onclick="startLogging()">
                        <i class="fas fa-file-alt"></i> 启动日志
                    </button>
                    <button class="btn btn-warning" onclick="stopLogging()">
                        <i class="fas fa-file-times"></i> 停止日志
                    </button>
                </div>
            </div>
        </div>

        <!-- Right Panel: Logs and Monitoring -->
        <div class="right-panel">
            <!-- Log Panel -->
            <div class="log-panel">
                <h3><i class="fas fa-terminal"></i> 执行日志</h3>
                <div class="log-content" id="log-content">
                    <!-- Log entries will be appended here -->
                </div>
                <div class="log-actions">
                    <button class="btn btn-secondary" onclick="clearLogs()"><i class="fas fa-eraser"></i> 清空日志</button>
                </div>
            </div>

                <!-- Serial Monitor Panel -->
                <div class="monitor-panel">
                    <h3><i class="fas fa-broadcast-tower"></i> 串口监控</h3>
                    <div class="serial-controls">
                        <button class="btn btn-sm btn-success" onclick="startSerialMonitor()">
                            <i class="fas fa-play"></i> 开始监控
                        </button>
                        <button class="btn btn-sm btn-danger" onclick="stopSerialMonitor()">
                            <i class="fas fa-stop"></i> 停止监控
                        </button>
                        <button class="btn btn-sm btn-warning" onclick="clearSerialMonitor()">
                            <i class="fas fa-trash"></i> 清空显示
                        </button>
                        <span class="monitor-status" id="monitor-status">未连接</span>
                    </div>
                    <div class="serial-input">
                        <input type="text" id="serial-command" placeholder="输入串口指令..." onkeypress="handleSerialKeyPress(event)">
                        <button class="btn btn-sm btn-primary" onclick="sendSerialCommand()">
                            <i class="fas fa-paper-plane"></i> 发送
                        </button>
                    </div>
                    <div class="serial-content" id="serial-monitor">
                        <div class="serial-line">
                            <span class="serial-time">[等待中]</span>
                            <span class="serial-text">串口监控已就绪，等待连接...</span>
                        </div>
                        <div class="serial-line">
                            <span class="serial-time">[提示]</span>
                            <span class="serial-text">请先连接串口设备，然后点击"开始监控"</span>
                        </div>
                        <div class="serial-line">
                            <span class="serial-time">[提示]</span>
                            <span class="serial-text">监控启动后将实时显示串口数据</span>
                        </div>
                    </div>
                </div>
        </div>
    </div>

    <!-- Serial Configuration Modal -->
    <div id="serial-config-modal" class="modal hidden" onclick="closeModalOnBackgroundClick(event, 'serial-config-modal')">
        <div class="modal-content">
            <div class="modal-header">
                <h2><i class="fas fa-plug"></i> 串口配置</h2>
                <span class="close" onclick="closeSerialConfigDialog()">&times;</span>
            </div>
            <div class="modal-body">
                <div class="config-form">
                    <div class="form-row">
                        <div class="form-group">
                            <label for="serial-port">串口端口:</label>
                            <div style="display: flex; gap: 10px; align-items: center;">
                                <select id="serial-port" style="flex: 1;">
                                    <option value="">请先扫描端口</option>
                                </select>
                                <button type="button" class="btn btn-info" onclick="scanSerialPorts()" style="padding: 8px 12px; font-size: 0.9em;">扫描端口</button>
                            </div>
                            <div id="detected-ports" style="margin-top: 8px; font-size: 0.9em; color: #666;"></div>
                        </div>
                        <div class="form-group">
                            <label for="serial-baudrate">波特率:</label>
                            <select id="serial-baudrate">
                                <option value="1200">1200</option>
                                <option value="2400">2400</option>
                                <option value="4800">4800</option>
                                <option value="9600" selected>9600</option>
                                <option value="19200">19200</option>
                                <option value="38400">38400</option>
                                <option value="57600">57600</option>
                                <option value="115200">115200</option>
                                <option value="230400">230400</option>
                                <option value="460800">460800</option>
                                <option value="921600">921600</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="serial-device-id">设备ID (1-255):</label>
                            <input type="number" id="serial-device-id" min="1" max="255" value="1">
                        </div>
                        <div class="form-group">
                            <label for="serial-timeout">超时时间(秒):</label>
                            <input type="number" id="serial-timeout" min="0.1" max="10" step="0.1" value="1.0">
                        </div>
                    </div>
                    
                    <div style="background: rgba(0, 212, 255, 0.1); padding: 15px; border-radius: 8px; margin-top: 15px; border: 1px solid rgba(0, 212, 255, 0.3);">
                        <h4 style="margin: 0 0 10px 0; color: #00d4ff;">高级设置 (通常不需要修改)</h4>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="serial-bytesize">数据位:</label>
                                <select id="serial-bytesize">
                                    <option value="8" selected>8</option>
                                    <option value="7">7</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="serial-parity">校验位:</label>
                                <select id="serial-parity">
                                    <option value="N" selected>无校验</option>
                                    <option value="E">偶校验</option>
                                    <option value="O">奇校验</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="serial-stopbits">停止位:</label>
                                <select id="serial-stopbits">
                                    <option value="1" selected>1</option>
                                    <option value="2">2</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="serial-xonxoff">流控制:</label>
                                <select id="serial-xonxoff">
                                    <option value="false" selected>无</option>
                                    <option value="true">XON/XOFF</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-success" onclick="applySerialConfig()" title="设置并保存串口配置，不自动连接">保存配置</button>
                <button class="btn btn-info" onclick="testSerialConnection()" title="测试串口连接状态，不连接电机驱动器">测试连接</button>
                <button class="btn btn-warning" onclick="closeSerialConfigDialog()">取消</button>
            </div>
        </div>
    </div>

    <!-- UART Configuration Modal -->
    <div id="uart-config-modal" class="modal hidden" onclick="closeModalOnBackgroundClick(event, 'uart-config-modal')">
        <div class="modal-content">
            <div class="modal-header">
                <h2><i class="fas fa-terminal"></i> UART串口配置</h2>
                <span class="close" onclick="closeUartConfigDialog()">&times;</span>
            </div>
            <div class="modal-body">
                <div class="config-form">
                    <div class="form-row">
                        <div class="form-group">
                            <label for="uart-port">UART端口:</label>
                            <div style="display: flex; gap: 10px; align-items: center;">
                                <select id="uart-port" style="flex: 1;">
                                    <option value="">请先扫描端口</option>
                                </select>
                                <button type="button" class="btn btn-info" onclick="scanUartPorts()" style="padding: 8px 12px; font-size: 0.9em;">扫描端口</button>
                            </div>
                            <div id="detected-uart-ports" style="margin-top: 8px; font-size: 0.9em; color: #666;"></div>
                        </div>
                        <div class="form-group">
                            <label for="uart-baudrate">波特率:</label>
                            <select id="uart-baudrate">
                                <option value="1200">1200</option>
                                <option value="2400">2400</option>
                                <option value="4800">4800</option>
                                <option value="9600">9600</option>
                                <option value="19200">19200</option>
                                <option value="38400">38400</option>
                                <option value="57600">57600</option>
                                <option value="115200" selected>115200</option>
                                <option value="230400">230400</option>
                                <option value="460800">460800</option>
                                <option value="921600">921600</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="uart-timeout">超时时间(秒):</label>
                            <input type="number" id="uart-timeout" min="0.1" max="10" step="0.1" value="1.0">
                        </div>
                        <div class="form-group">
                            <label for="uart-bytesize">数据位:</label>
                            <select id="uart-bytesize">
                                <option value="8" selected>8</option>
                                <option value="7">7</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="uart-parity">校验位:</label>
                            <select id="uart-parity">
                                <option value="N" selected>无校验</option>
                                <option value="E">偶校验</option>
                                <option value="O">奇校验</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="uart-stopbits">停止位:</label>
                            <select id="uart-stopbits">
                                <option value="1" selected>1</option>
                                <option value="2">2</option>
                            </select>
                        </div>
                    </div>
                    
                    <div style="background: rgba(0, 255, 0, 0.1); padding: 15px; border-radius: 8px; margin-top: 15px; border: 1px solid rgba(0, 255, 0, 0.3);">
                        <h4 style="margin: 0 0 10px 0; color: #00ff00;">UART串口说明</h4>
                        <p style="margin: 0; font-size: 0.9em; color: #666;">
                            UART串口用于日志监控和命令交互，与Modbus串口独立工作。<br>
                            通常用于接收设备的调试日志和发送交互命令。
                        </p>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-success" onclick="applyUartConfig()" title="设置并保存UART配置">保存配置</button>
                <button class="btn btn-info" onclick="testUartConnection()" title="测试UART连接状态">测试连接</button>
                <button class="btn btn-primary" onclick="connectUart()" title="连接UART串口进行日志监控">连接串口</button>
                <button class="btn btn-warning" onclick="closeUartConfigDialog()">取消</button>
            </div>
        </div>
    </div>

    <!-- Motor Configuration Modal -->
    <div id="motor-config-modal" class="modal hidden" onclick="closeModalOnBackgroundClick(event, 'motor-config-modal')">
        <div class="modal-content">
            <div class="modal-header">
                <h2><i class="fas fa-motorcycle"></i> 电机配置</h2>
                <span class="close" onclick="closeMotorConfigDialog()">&times;</span>
            </div>
            <div class="modal-body">
                <div class="config-form">
                    <div class="form-row">
                        <div class="form-group">
                            <label for="motor-system-mode">系统模式:</label>
                            <select id="motor-system-mode">
                                <option value="independent_speed_closed_loop" selected>独立速度闭环</option>
                                <option value="independent_speed_open_loop">独立速度开环</option>
                                <option value="same_source_speed_closed_loop">同源速度闭环</option>
                                <option value="same_source_speed_open_loop">同源速度开环</option>
                                <option value="differential_speed_closed_loop">差速闭环</option>
                                <option value="differential_speed_open_loop">差速开环</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="motor-default-speed">默认转速 (RPM):</label>
                            <input type="number" id="motor-default-speed" min="0" max="1000" value="500">
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="motor-left-max-speed">左电机最大转速 (RPM):</label>
                            <input type="number" id="motor-left-max-speed" min="0" max="2000" value="1000">
                        </div>
                        <div class="form-group">
                            <label for="motor-right-max-speed">右电机最大转速 (RPM):</label>
                            <input type="number" id="motor-right-max-speed" min="0" max="2000" value="1000">
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="motor-left-min-speed">左电机最小转速 (RPM):</label>
                            <input type="number" id="motor-left-min-speed" min="0" max="100" value="0">
                        </div>
                        <div class="form-group">
                            <label for="motor-right-min-speed">右电机最小转速 (RPM):</label>
                            <input type="number" id="motor-right-min-speed" min="0" max="100" value="0">
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="motor-acceleration">加速度 (RPM/s):</label>
                            <input type="number" id="motor-acceleration" min="1" max="1000" value="100">
                        </div>
                        <div class="form-group">
                            <label for="motor-deceleration">减速度 (RPM/s):</label>
                            <input type="number" id="motor-deceleration" min="1" max="1000" value="100">
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-success" onclick="applyMotorConfig()">应用配置</button>
                <button class="btn btn-warning" onclick="closeMotorConfigDialog()">取消</button>
            </div>
        </div>
    </div>

    <!-- Logging Configuration Modal -->
    <div id="logging-config-modal" class="modal hidden" onclick="closeModalOnBackgroundClick(event, 'logging-config-modal')">
        <div class="modal-content">
            <div class="modal-header">
                <h2><i class="fas fa-file-alt"></i> 日志配置</h2>
                <span class="close" onclick="closeLoggingConfigDialog()">&times;</span>
            </div>
            <div class="modal-body">
                <div class="config-form">
                    <div class="form-row">
                        <div class="form-group">
                            <label for="log-mode">日志级别:</label>
                            <select id="log-mode">
                                <option value="debug">调试模式 - 输出所有日志信息</option>
                                <option value="info" selected>信息模式 - 输出信息和以上级别</option>
                                <option value="warning">警告模式 - 输出警告和以上级别</option>
                                <option value="error">错误模式 - 只输出错误和严重错误</option>
                                <option value="production">生产模式 - 只输出错误和关键信息</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="log-format">日志格式:</label>
                            <select id="log-format">
                                <option value="%(asctime)s - %(name)s - %(levelname)s - %(message)s" selected>默认格式</option>
                                <option value="%(levelname)s - %(message)s">简单格式</option>
                                <option value="%(asctime)s - %(name)s - %(levelname)s - %(filename)s:%(lineno)d - %(message)s">详细格式</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label>输出方式:</label>
                            <div style="display: flex; gap: 20px; margin-top: 8px;">
                                <label style="display: flex; align-items: center; gap: 5px;">
                                    <input type="checkbox" id="log-to-console" checked>
                                    <span>控制台输出</span>
                                </label>
                                <label style="display: flex; align-items: center; gap: 5px;">
                                    <input type="checkbox" id="log-to-file" checked>
                                    <span>文件输出</span>
                                </label>
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="max-file-size">最大文件大小 (MB):</label>
                            <input type="number" id="max-file-size" min="1" max="100" value="10">
                        </div>
                        <div class="form-group">
                            <label for="backup-count">备份文件数量:</label>
                            <input type="number" id="backup-count" min="1" max="10" value="5">
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-success" onclick="applyLoggingConfig()">应用配置</button>
                <button class="btn btn-info" onclick="testLoggingConfig()">测试日志</button>
                <button class="btn btn-warning" onclick="closeLoggingConfigDialog()">取消</button>
            </div>
        </div>
    </div>

    <!-- Configuration Load Modal -->
    <div id="config-load-modal" class="modal hidden" onclick="closeModalOnBackgroundClick(event, 'config-load-modal')">
        <div class="modal-content">
            <div class="modal-header">
                <h2><i class="fas fa-file-import"></i> 配置文件管理</h2>
                <span class="close" onclick="closeConfigLoadDialog()">&times;</span>
            </div>
            <div class="modal-body">
                <div class="config-file-input">
                    <h3>配置文件内容 (JSON格式):</h3>
                    <textarea id="config-content" placeholder="请粘贴完整的配置文件JSON内容..."></textarea>
                    <p style="margin-top: 10px; color: #b0b0b0; font-size: 0.9em;">
                        支持格式: 完整的JSON配置文件，包含serial、motor等配置节
                    </p>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-success" onclick="loadConfigFromText()">应用配置</button>
                <button class="btn btn-primary" onclick="saveConfigToText()">保存配置</button>
                <button class="btn btn-info" onclick="loadDefaultConfig()">默认配置</button>
                <button class="btn btn-warning" onclick="closeConfigLoadDialog()">取消</button>
            </div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>
